<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      width="800px"
      @closed="close"
      @open="openfn"
    >
      <zform
        ref="formz"
        colspan="12"
        label-position="left"
        labelwidth="100px"
        :nowdata="formdata"
        :nowinputs="inputs"
      >
        <template #ggs>
          <el-form-item label="产品规格" status-icon>
            <div>
              <div class="baseflex">
                <div style="width: 276px; padding-right: 20px">
                  <el-input v-model="ggsstr" placeholder="产品规格" />
                </div>
                <el-button size="small" type="primary" @click="ggsdataadd">
                  添加规格
                </el-button>
              </div>
              <div class="baseflex" style="padding-top: 8px">
                <el-button
                  v-for="(item, key) in ggsdata"
                  :key="key"
                  round
                  size="small"
                  type="primary"
                >
                  <div class="baseflex">
                    {{ item }}
                    <i
                      class="iconfont iconchacha"
                      style="font-size: 12px; margin-left: 4px"
                      @click="ggsdatadel(key)"
                    ></i>
                  </div>
                </el-button>
              </div>
            </div>
          </el-form-item>
        </template>
      </zform>
      <template #footer>
        <el-button :loading="loading" type="primary" @click="updatafn">
          确定
        </el-button>
        <slot name="btnslot"></slot>
        <el-button @click="close">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  import zform from '@/components/zFrom/zFrom'

  export default {
    name: 'afterlistxjpd',
    components: {
      zform,
    },
    emits: ['edtdatafn'],
    data() {
      return {
        ggsstr: '',
        ggsdata: [],
        dialogVisible: false,
        title: '详情',
        inputs: [
          { label: '产品名称', value: 'mc' },
          { label: '产品类型', value: 'lx' },
          { label: '产品型号', value: 'xh' },
          { label: '产品规格', value: 'ggs', span: 24 },

          { label: '封面图片', value: 'picsy', type: 'imgs' },
          {
            value: 'pic',
            label: '商品图片',
            type: 'imgs',
            values: ['pic1', 'pic2', 'pic3', 'pic4', 'pic5'],
          },
        ],
        USearch: [],
        formdata: {},
        loading: false,
        setgtelsfalg: false,
      }
    },
    mounted() {},
    methods: {
      ggsdataadd() {
        if (this.ggsstr == '') {
          return
        }
        if (this.ggsstr.length >= 10) {
          return
        }
        this.ggsdata.push(this.ggsstr)
        this.ggsstr = ''
      },
      ggsdatadel(index) {
        this.ggsdata.splice(index, 1)
      },
      async show(data = {}, asynccallback) {
        this.title = data.id ? '产品详情' : '产品添加'
        this.formdata = this.$z.deepClone(data)
        this.ggsdata = this.formdata.ggs || []
        this.asynccallback = asynccallback
        this.dialogVisible = true
      },

      async getdata() {
        // sutype:
      },
      async updatafn() {
        let formdata = await this.$refs['formz'].validate()
        for (let i = 1; i <= 10; i++) {
          formdata[`gg${i}`] = this.ggsdata[i - 1] ? this.ggsdata[i - 1] : ''
        }
        this.loading = true
        let url = formdata.id ? '/ShopUserwpedt' : '/ShopUserwpadd'
        let { data } = await this.$z.$axios.post(url, formdata).catch(() => {
          this.loading = false
        })
        let par = this.$z.parfn(data)
        if (par.value == 'succeed') {
          this.$message.success(par.label)
          this.loading = false
          this.getdata()
        } else {
          this.$message.error(par.label)
        }
        this.loading = false
        this.asynccallback()
        this.dialogVisible = false
      },
      close() {
        this.dialogVisible = false
      },
      openfn() {},
    },
  }
</script>
<style lang="scss">
  .baseflex {
    display: flex;
    align-items: center;
  }
  .useritem {
    height: 40px;
    padding-left: 10px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;

    &:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    &.active {
      background: rgba(255, 255, 255, 0.2);
    }
  }
  .span12 .el-form-item {
    background: rgba(255, 255, 255, 0.2);
    margin-bottom: 8px;
    padding: 10px;
  }
</style>
